<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
    <a-form :form="form" :labelCol="{ span: 4 }" labelAlign="left">
      <a-form-item label="品种名称：" :wrapperCol="{ span: 18 }" required>
        <a-select
          @change="handleChange('categorName', $event)"
          placeholder="请选择品类"
        >
          <a-select-option
            v-for="i in categoryList"
            :key="i.id"
            :value="i.title"
          >
            {{ i.title }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="品种名称：" :wrapperCol="{ span: 18 }" required>
        <a-input
          placeholder="请输入品种名称"
          :value="form.breedName"
          @change="handleChange('breedName', $event)"
        />
      </a-form-item>
      <a-form-item label="品种描述" :wrapperCol="{ span: 18 }" required>
        <a-textarea
          rows="4"
          placeholder="请输入品种描述"
          :value="form.breedDec"
          @change="handleChange('breedDec', $event)"
        />
      </a-form-item>
      <a-form-item label="品种图片" :wrapperCol="{ span: 18 }" required>
        <a-input
          placeholder="品种图片"
          :value="form.breedImg"
          @change="handleChange('breedImg', $event)"
        />
        <img
          :src="form.breedImg"
          width="100px"
          height="100px"
          class="rounded_8"
          alt="品种图"
        />
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
export default {
  name: "BreedForm",
  emit: ["setBreedForm"],
  props: ["form", "categoryList"],
  methods: {
    handleChange(type, target) {
      this.$emit("setBreedForm", {
        value: type === "categorName" ? target : target.target.value,
        type,
      });
    },
  },
};
</script>

<style scoped>
.rounded_8 {
  border-radius: 8px;
}
</style>
